<template>
    <div>
        <div class="accountCom">
            <div class="accountCom-top">
                <el-form ref="form">
                    <el-form-item label="单位名称" label-width="70px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="unitName" style='width: 288px !important;' size="mini"></el-input>
                    </el-form-item>
                </el-form>
                <button class="check-btn" @click="searchBusList" style="margin-left: 130px;"><!-- " -->
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">
                    查询
                </button>
            </div>

            <div class="accountCom-bottom">
                <el-row>
                    <el-col :span="24" class="table-fun">
                        <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf">
                        <div class="lf choose-title fun-text" @click="allList">刷新</div>
                        <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf">
                        <div class="lf choose-title fun-text" @click="addClass">添加</div>
                        <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf">
                        <div class="lf choose-title fun-text" @click="showUpdateWin">修改</div>
                        <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf">
                        <div class="lf choose-title fun-text" @click="deleteClass">删除</div>
                    </el-col>
                </el-row>
                <el-row class="accountComTab lf">
                    <el-col :span="24">
                        <avue-crud @current-change="rowChange" @current-row-change="currentRowChange" :data="bearFruit"
                                   :page="page" :option="dataForm"></avue-crud>
                    </el-col>
                </el-row>
                <div class="broadside lf" v-if="broadside">
                    <span @click="openBs"></span>
                </div>
                <div class="broadsideList rf" v-if="broadsideList">
                    <div class="broadsideList-title" @click="closeBs">
                        <span class="lf">滚存金记录</span>
                        <span class="rightIcon"></span>
                    </div>
                    <el-row class="">
                        <el-col :span="24">
                            <avue-crud @current-change="rowBsChange" :data="broadsFruit" :page="pageBs" :option="dataBsForm"></avue-crud>
                        </el-col>
                    </el-row>
                    <div class="broadsTotal">
                        <span style="margin-right: 10px;">合计</span><span>{{this.totalMoney}}</span>
                    </div>
                </div>
            </div>
        </div>
        <!--添加弹窗 S-->
        <div class="addModal" v-if="addModal">
            <div class="left-choose">
                <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf">
                <div class="lf title" style="color: #009688;padding-left: 5px;">添加</div>
            </div>
            <div class="add-btn">
                <avue-form ref="form" v-model="obj" :option="addOption" class="yz-form"></avue-form>
                <button class="cancel-btn rf" @click="cancelModal"><i class="cancel-icon lf"></i><span
                        class="lf">取消</span></button>
                <button class="sure-btn rf" @click="sureBtn"><i class="lf"></i><span class="lf">确定</span></button>
            </div>

        </div>
        <!--添加弹窗 E-->

        <!--修改弹窗 S-->
        <div class="addModal" v-if="revise">
            <div class="left-choose">
                <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf">
                <div class="lf title" style="color: #009688;padding-left: 5px;">修改</div>
            </div>
            <div class="add-btn">
                <avue-form ref="form" v-model="reviseObj" :option="reviseOption" class="yz-form"></avue-form>
                <button class="cancel-btn rf" @click="reviseCancelModal"><i class="cancel-icon lf"></i><span
                        class="lf">取消</span></button>
                <button class="sure-btn rf" @click="reviseSureBtn"><i class="lf"></i><span class="lf">确定</span></button>
            </div>

        </div>
        <!--修改弹窗 E-->

        <!--删除弹窗 S-->
        <div class="deleteModal" v-if="showModal">
            <div class="deleteModal-box">
                <div class="delete-title"><i></i><span>你确定要删除吗？</span></div>
                <button class="sure-btn rf" @click="deleteBtn">确定</button>
                <button class="cancel-btn rf" @click="cancelBtn">取消</button>
            </div>
        </div>
        <!--删除弹窗 E-->
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                obj: {},
                reviseObj: {},
                newObj: {},
                newId: {},
                totalMoney: '',
                unitName: '',
                balance_company_id: '',
                broadside: true,
                showModal: false,
                broadsideList: false,
                addModal: false,
                revise: false,
                page: {
                    pageSizes: [10],//分页信息 pageSize
                    total: 20,//总页数 totalRow
                    currentPage: 1,//当前第几页 pageNumber

                    pageSize: 10,//每一页加载多少条数据
                },
                pageBs: {
                    pageSizes: [10],//分页信息 pageSize
                    total: 20,//总页数 totalRow
                    currentPage: 1,//当前第几页 pageNumber

                    pageSize: 10,//每一页加载多少条数据
                },
                bearFruit: [],//最后写入push返回的数据
                broadsFruit: [],//最后写入push返回的数据
                dataForm: {
                    page: true,
                    align: 'center',
                    highlightCurrentRow: true,
                    addBtn: false,//是否添加按钮
                    delBtn: false,//是否添加删除按钮
                    editBtn: false,//是否添加编辑按钮
                    menu: false,//是否添加菜单按钮
                    index: true,
                    column: [
                        {
                            label: '单位编码',
                            prop: 'code',
                        },
                        {
                            // sortable:true,
                            label: '单位简称',
                            prop: 'name_short',
                        },
                        {
                            label: '全称',
                            prop: 'name'
                        },
                        {
                            label: '负责人',
                            prop: 'jsname'
                        },
                        {
                            label: '联系电话',
                            prop: 'phone'
                        },
                        {
                            label: '银行名称',
                            prop: 'bankname'
                        },
                        {
                            label: '银行账号',
                            prop: 'bankno'
                        },
                    ]
                },
                dataBsForm: {
                    page: true,
                    align: 'center',
                    highlightCurrentRow: true,
                    addBtn: false,//是否添加按钮
                    delBtn: false,//是否添加删除按钮
                    editBtn: false,//是否添加编辑按钮
                    menu: false,//是否添加菜单按钮
                    index: true,
                    column: [
                        {
                            label: '操作日期',
                            prop: 'gather_date',
                        },
                        {
                            // sortable:true,
                            label: '金额',
                            prop: 'amount',
                        },
                        {
                            label: '汇总单',
                            prop: 'balance_sum_no'
                        },
                    ]
                },
                addOption: {
                    column: [
                        {
                            // sortable:true,
                            label: '单位简称*',
                            prop: 'name_short1',
                        },
                        {
                            label: '单位编码',
                            prop: 'code1',
                        },
                        {
                            label: '负责人',
                            prop: 'jsname1'
                        },
                        {
                            label: '联系电话',
                            prop: 'phone1'
                        },
                        {
                            label: '单位全称*',
                            prop: 'name1',
                            span: 24
                        },
                        {
                            label: '地址',
                            prop: 'addres1',
                            span: 24
                        },
                        {
                            label: '开户银行',
                            prop: 'openBank1',
                            span: 24
                        },
                        {
                            label: '银行账号',
                            prop: 'bankno1',
                            span: 24
                        },
                        {
                            label: '备注',
                            prop: 'remarks1',
                            span: 24
                        },
                    ]
                },
                reviseOption: {
                    column: [
                        {
                            // sortable:true,
                            label: '单位简称*',
                            prop: 'name_short2',
                        },
                        {
                            label: '单位编码',
                            prop: 'code2',
                        },
                        {
                            label: '负责人',
                            prop: 'jsname2'
                        },
                        {
                            label: '联系电话',
                            prop: 'phone2'
                        },
                        {
                            label: '单位全称*',
                            prop: 'name2',
                            span: 24
                        },
                        {
                            label: '地址',
                            prop: 'addres2',
                            span: 24
                        },
                        {
                            label: '开户银行',
                            prop: 'openBank2',
                            span: 24
                        },
                        {
                            label: '银行账号',
                            prop: 'bankno2',
                            span: 24
                        },
                        {
                            label: '备注',
                            prop: 'remarks2',
                            span: 24
                        },
                    ]
                },
            };
        },
        methods: {
            searchBusList() {//查询
                console.log(this.broadsFruit);
                this.bearFruit = [];
                this.postRequest('/fin/balance/company/list',
                    {
                        filterRules: JSON.stringify([
                            {"field": "name", "op": "cn", "value": this.unitName},
                            {"field": "name_short", "op": "cn", "value": this.unitName}
                        ]),
                        order: 'asc,asc', page: this.page.currentPage, rows: '10', sort: 'code,name_short'
                    }).then(target => {
                        console.log(target);
                        var tag = target.data.list;
                        //页码大小
                        this.page.pageSize = target.data.pageSize;
                        //页码数
                        this.page.pageNumber = target.data.pageNumber;
                        //总页数
                        this.page.total = target.data.totalRow;
                        this.bearFruit = tag;
                    });
            },
            allList() {//刷新
                this.unitName = '';
                this.postRequest('/fin/balance/company/list',
                    {
                        filterRules: JSON.stringify([
                            {"field": "name", "op": "cn", "value": ""},
                            {"field": "name_short", "op": "cn", "value": ""}
                        ]),
                        order: 'desc', page: this.page.currentPage, rows: '10', sort: 'code,name_short'
                    }).then(target => {
                    console.log(target);
                    var tag = target.data.list;
                    //页码大小
                    this.page.pageSize = target.data.pageSize;
                    //页码数
                    this.page.pageNumber = target.data.pageNumber;
                    //总页数
                    this.page.total = target.data.totalRow;
                    this.broadsFruit = tag;
                    // $(".accountComTab").css('width', '98%');
                    // this.broadside = true;
                    // this.broadsideList = false;
                    this.loadCompany();
                });
            },
            addClass() {//添加
                this.unitName = '';
                this.addModal = true;
            },
            showUpdateWin() {//修改
                this.unitName = '';
                if (!this.balance_company_id) {
                    this.$message.error('请选择要修改的一行数据');
                } else {
                    this.revise = true;

                    this.reviseObj.name_short2 = this.newObj.name_short;
                    this.reviseObj.code2 = this.newObj.code === 'null' || 'undefined' ? '' : this.newObj.code;
                    this.reviseObj.jsname2 = this.newObj.jsname === 'null' || 'undefined' ? '' : this.reviseObj.jsname2;
                    this.reviseObj.name2 = this.newObj.name;
                    this.reviseObj.phone2 = this.newObj.phone === 'null' || 'undefined' ? '' : this.newObj.phone;
                    this.reviseObj.addres2 = this.newObj.address === 'null' || 'undefined' ? '' : this.newObj.address;
                    this.reviseObj.openBank2 = this.newObj.bankname  === 'null' || 'undefined' ? '' : this.newObj.bankname;
                    this.reviseObj.bankno2 = this.newObj.bankno  === 'null' || 'undefined' ? '' : this.newObj.bankno;
                    this.reviseObj.remarks2 = this.newObj.remark === 'null' || 'undefined' ? '' : this.newObj.remark;
                }
            },
            loadCompany() {
                this.postRequest('/fin/balance/company/list',
                    {
                        order: 'desc', page: this.page.currentPage, rows: '10', sort: 'code,name_short'
                    }).then(target => {
                    // console.log(target);

                    var tag = target.data.list;
                    //页码大小
                    this.page.pageSize = target.data.pageSize;
                    //页码数
                    this.page.pageNumber = target.data.pageNumber;
                    //总页数
                    this.page.total = target.data.totalRow;

                    this.bearFruit = tag;
                })
            },
            currentRowChange(val) {//点击行读取对应的信息
                console.log(val);
                /*this.broadside = false;
                this.broadsideList = true;
                if (this.broadsideList) {
                    $(".accountComTab").css('width', '64%');
                }*/
                this.balance_company_id = val.id;
                this.newId = val.id;
                this.newObj = val;
                this.loadAccumulist();
            },
            loadAccumulist() {
                this.postRequest('/fin/balance/company/accumulatedAmount/list',
                    {
                        filterRules: JSON.stringify([
                            {"field": "l.balance_company_id", "op": "eq", "value": this.balance_company_id},
                            {"field": "f.del_flag", "op": "eq", "value": "0"}
                        ]),
                        order: 'desc', page: this.pageBs.currentPage, rows: '10', sort: 'l.id'
                    }).then(target => {
                    // console.log(target);

                    var tag = target.data.list;
                    //页码大小
                    this.pageBs.pageSize = target.data.pageSize;
                    //页码数
                    this.pageBs.pageNumber = target.data.pageNumber;
                    //总页数
                    this.pageBs.total = target.data.totalRow;
                    var tags = target.data.footer;
                    for (var i = 0; i < tags.length; i++) {
                        // console.log(tags[i].amount);
                        this.totalMoney = tags[i].amount
                    }
                    this.broadsFruit = tag;
                })
            },
            rowChange(val) {
                console.log(val);
                this.page.currentPage = val;
                this.loadCompany();
            },
            rowBsChange(val) {
                console.log(val);
                this.pageBs.currentPage = val;
                this.loadAccumulist();
            },
            closeBs() {
                this.broadsideList = false;
                if (!this.broadsideList) {
                    $(".accountComTab").css('width', '98%');
                }
                this.broadside = true;
            },
            openBs() {
                this.broadsideList = true;
                if (this.broadsideList) {
                    $(".accountComTab").css('width', '64%');
                    $(".broadsideList").show(1000);
                }
                this.broadside = false;
            },
            cancelModal() {
                this.addModal = false;
            },
            sureBtn() {//确定添加
                this.postRequest('/fin/balance/company/add?balanceCompany.id=&balanceCompany.name_short=' + this.obj.name_short1 + '&balanceCompany.code=' + this.obj.code1 + '&balanceCompany.name=' + this.obj.name1 + '&balanceCompany.address=' + this.obj.addres1 + '&balanceCompany.jsname=' + this.obj.jsname1 + '&balanceCompany.phone=' + this.obj.phone1 + '&balanceCompany.bankname=' + this.obj.openBank1 + '&balanceCompany.bankno=' + this.obj.bankno1 + '&balanceCompany.remark=' + this.obj.remarks + '')
                    .then(target => {
                        console.log(target);

                        if (this.obj.name_short1 === '' || this.obj.name1 === '') {
                            this.$message.error('带 * 的必须填写噢！');
                        } else if (target.data[0] === '0') {
                            this.$message.success(target.data[1]);
                            this.obj = {};
                            this.addModal = false;
                            this.loadCompany();
                        }
                    })
            },
            deleteClass() {//删除数据
                if (!this.balance_company_id) {
                    this.$message.error('请选择要删除的一行数据');
                } else {
                    this.showModal = true;
                }
            },
            deleteBtn() {//确定删除
                this.postRequest('/fin/balance/company/del',
                    {
                        id: this.balance_company_id
                    })
                    .then(target => {
                        console.log(target);
                        if (target.data[0] === '0') {
                            this.$message.success(target.data[1]);
                            this.showModal = false;
                            this.loadCompany();
                        }
                    });
            },
            cancelBtn() {
                this.showModal = false;
            },
            reviseCancelModal() {
                this.revise = false;
            },
            reviseSureBtn() {
                this.postRequest('/fin/balance/company/update?balanceCompany.id='+this.newId+'&balanceCompany.name_short='+this.reviseObj.name_short2+'&balanceCompany.code='+ this.reviseObj.code2+'&balanceCompany.name='+this.reviseObj.name2+'&balanceCompany.address='+this.reviseObj.addres2+'&balanceCompany.jsname='+this.reviseObj.jsname2+'&balanceCompany.phone='+this.reviseObj.phone2+'&balanceCompany.bankname='+ this.reviseObj.openBank2+'&balanceCompany.bankno='+this.reviseObj.bankno2+'&balanceCompany.remark='+this.reviseObj.remarks2+'')
                    .then(target=>{
                        console.log(target);
                        if (target.data[0] === '0') {
                            this.$message.success(target.data[1]);
                            this.revise = false;
                            this.loadCompany();
                        }
                    })
            },
        },
        computed: {},
        watch: {},
        mounted() {
            this.$emit("sendActive","5-1");
            this.loadCompany();
        }
    };
</script>
<style scoped src="../../assets/css/financeManage/accountCom.css"></style>
<style scoped>
</style>